<template>
  <div v-if="notifys && notifys.length > 0"
       class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 hover:scale-[1.03] transition-all duration-300 hover:shadow-xl hover:shadow-sky-500/50">

    <div class="flex mb-3">
      <h2 class="flex items-center font-bold text-gray-900 uppercase dark:text-white">
        <svg t="1758611509270" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3371" width="200" height="200">
          <path d="M672 672m-240 0a240 240 0 1 0 480 0 240 240 0 1 0-480 0Z" fill="#FFF4E8" p-id="3372"></path>
          <path
              d="M919.3 551.7H757.4c-22.4 0-40.7-18.2-40.7-40.6s18.3-40.6 40.7-40.6h161.9c22.4 0 40.7 18.2 40.7 40.6s-18.3 40.6-40.7 40.6zM902.4 180.6L788 294.8c-15.8 15.8-41.7 15.8-57.6 0-15.9-15.8-15.8-41.6 0-57.4l114.4-114.2c15.8-15.8 41.7-15.8 57.6 0s15.9 41.6 0 57.4zM732.2 731.4c15.8-15.8 41.7-15.8 57.6 0l114.4 114.2c15.8 15.8 15.8 41.6 0 57.4-15.8 15.8-41.7 15.8-57.6 0L732.2 788.8c-15.9-15.8-15.9-41.6 0-57.4z"
              fill="#E27614" p-id="3373"></path>
          <path
              d="M608.2 112c-4.6 0-9.4 1.2-13.8 3.9L232 344.5H116.5c-28.9 0-52.5 23.6-52.5 52.4v230.3c0 28.8 23.6 52.4 52.5 52.4H232l362.5 228.5c4.4 2.7 9.1 3.9 13.7 3.9 13.7 0 26.3-10.8 26.3-26.2V138.2c0-15.4-12.6-26.2-26.3-26.2zM195.4 598.6c0 8.8-7.2 16-16 16h-40.3c-8.8 0-16-7.2-16-16v-164c0-8.8 7.2-16 16-16h40.3c8.8 0 16 7.2 16 16v164z m368.7 145.3c0 27.5-30.3 44.3-53.7 29.9L279 619.8l-0.4-0.2c-10.6-6.3-17.2-17.8-17.2-30.2V434.7c0-12.4 6.5-23.8 17.2-30.1l0.4-0.3 231.4-154c23.5-14.4 53.7 2.4 53.7 29.9v463.7z"
              fill="#FE9120" p-id="3374"></path>
        </svg>
        公告
      </h2>
      <span class="grow"></span>

      <!-- 查看更多 -->
      <a @click="router.push('/notify/list')" class=" bg-gray-100 flex items-center px-2.5 py-1 text-xs font-medium text-center
            text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200
            dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
             dark:focus:ring-gray-700">
        <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"/>
        </svg>
      </a>

    </div>


    <div class="text-sm flex flex-wrap gap-3 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
      <div class="mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-full">
        <ol v-if="notifys && notifys.length > 0" class="mt-3 divide-y divider-gray-200 dark:divide-gray-700 pt-3">
          <li v-for="(notify, index) in notifys" :key="index" class="rounded-lg">
            <a class="items-center block p-3 sm:flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
              <div class="text-gray-600 dark:text-gray-400">
                <h2 class="text-lg font-normal text-gray-900 dark:text-white">
                  {{ notify.name }}
                </h2>
                <h6 class="text-base font-normal text-gray-400 dark:text-white">
                  {{ notify.content }}
                </h6>
                <span
                    class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                                        <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white"
                                             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                             viewBox="0 0 20 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/>
                                        </svg>
                                       发布日期： {{ notify.createDate }}
                                    </span>
              </div>
            </a>
          </li>
        </ol>
      </div>

    </div>

  </div>
</template>

<script setup>
import {getNotifyList} from '@/api/frontend/notify'
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
// 所有标签
const notifys = ref([])
getNotifyList().then((res) => {
  if (res.success) {
    notifys.value = res.data
  }
})

</script>

